import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect,
} from "react-router-dom";

export default function LendingMap() {
  let tabHead = [
    {
      link: "/userDetails",
      name: "用户详情",
    },
    {
      link: "/loginLog",
      name: "登录日志",
    },
  ];
  let routes = [
    {
      path: "/userDetails",
      component: userDetails,
    },
    {
      path: "/loginLog",
      component: loginLog,
    },
  ];
  return (
    <div className="App">
      <Router>
        <div>
          <ul className="App-tab">
            {tabHead.map((item) => {
              return (
                <li className="App-tab-item" key={item.link}>
                  <Link to={item.link}>{item.name}</Link>
                </li>
              );
            })}
          </ul>
        </div>
        <Switch>
          {routes.map((item) => {
            return (
              <Route
                path={item.path}
                component={item.component}
                key={item.path}
              ></Route>
            );
          })}
          <Redirect to="/userDetails" />
        </Switch>
      </Router>
    </div>
  );
}
function userDetails() {
  return (
    <div>
      <h1> 用户详情</h1>
    </div>
  );
}
function loginLog() {
  return (
    <div>
      <h1>登录日志</h1>
    </div>
  );
}

